<template>
  <div class="container">
    <div class="left" @click="href1">
      <!-- <div class="logoIcon">
        <img src="../../assets/yes.jpg" alt="">
      </div>
      <div class="text">
        <span class="name">命运-冠位指定</span>
        <span class="desc">Fate系列首款正版手游</span>
      </div> -->
    </div>
    <div class="right">
      <div @click="href2"></div>
      <div @click="href3"></div>
      <div @click="href"></div>
      <!-- <button>官网</button>
      <button>下载</button>
      <div class="shareIcon">
        <img :src="shareSVG" alt="">
      </div> -->
    </div>
  </div>

</template>

<script setup lang="ts">
import shareSVG from '@/assets/fenxiang.svg'
const href1 = () => { window.open('https://www.biligame.com/detail', '_blank') }
const href2 = () => { window.open('https://game.bilibili.com/fgo/h5/', '_blank') }
const href3 = () => { window.open('https://pkg.biligame.com/games/my-gwzdFateGO_2.86.2_20240827_050156_5b6b8.apk', '_blank') }
const href = () => { }
</script>


<style scoped lang="scss">
.container {
  height: 6.25rem;
  width: 46.875rem;
  // background-color: #232323;
  background: url(../../assets/topbg2eb3ee92.png) no-repeat;
  background-size: contain;
  padding: .625rem;
  display: flex;
  justify-content: space-between;
  align-items: center;

  position: sticky;
  top: 0;
  z-index: 999;

  .left {
    flex: 1;
    height: 100%;
    // display: flex;
    background: url(../../assets/left.png) no-repeat;
    background-size: contain;
    // .logoIcon {
    //   height: 5.375rem;
    //   width: 5.375rem;
    //   border-radius: .1875rem;
    //   overflow: hidden;

    //   img {
    //     height: 100%;
    //     width: 100%;
    //   }
    // }

    // .text {
    //   margin-left: 1rem;
    //   display: flex;
    //   flex-direction: column;
    //   justify-content: space-evenly;

    //   .name {
    //     font-size: 1.5625rem;
    //     color: #e9e9e9;
    //   }

    //   .desc {
    //     font-size: 1.25rem;
    //     color: #7f7f7f;
    //   }
    // }
  }

  .right {
    flex: 1;
    // height: 100%;
    // background-color: aquamarine;
    display: flex;
    justify-content: space-around;
    align-items: center;

    >div:nth-child(1) {
      width: 7.9rem;
      height: 2.5rem;
      background: url(../../assets/3825acc8263ad372781cd4fa835b99bb1e36532f.png) no-repeat;
      background-size: cover;
    }

    >div:nth-child(2) {
      width: 7.5rem;
      height: 2.5rem;
      background: url(../../assets/e1ff4d2836598b99e93d3e11a14a2ccd7c187dff.png) no-repeat;
      background-size: cover;
    }

    >div:nth-child(3) {
      height: 2.625rem;
      width: 2.625rem;
      background: url(../../assets/share.png) no-repeat;
      background-size: contain;
    }

    // align-items: center;

    // button {
    //   width: 7.5rem;
    //   height: 2.5rem;
    //   font-size: 1.25rem;
    // }

    // button:nth-child(1) {
    //   background-color: #eaeaea;
    // }

    // button:nth-child(2) {
    //   background-color: #f49f30;
    // }

    // .shareIcon {
    //   height: 2.625rem;
    //   width: 2.625rem;
    //   border: .0625rem solid #eaeaea;
    //   padding: .2875rem;
    // }
  }
}
</style>
